<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:53:26
 * @LastEditors: wjk
 * @LastEditTime: 2020-09-14 15:15:42
 * @description: 绑定邀请码
 -->
<template>
  <base-page-view class-name="app-login">
    <view class="bind-box">
      <view class="returnBox-column" :style="{'top': `${returnButtonTop}rpx`}">
        <view class="next" @click="_back">跳过</view>
      </view>
      <view class="phoneBox">
        <view class="title">
          绑定邀请码
          <view class="decorate">暂无邀请码可直接跳过</view>
        </view>
        <view v-if="inviteInfo.uid" class="invite-box-ten">
          <view class="merge-box">
            <view class="code">{{ inviteCode }}</view>
            <view class="button" @click="clear">返回修改</view>
          </view>
          <view class="invite-man-box">
            <view class="user-info">
              <view class="head-img"><image :src="inviteInfo.head_img" /></view>
              <view class="name-box">
                <view class="nickname">{{ inviteInfo.nickname }}</view>
                <view class="mobile">手机号: {{ inviteInfo.mobile }}</view>
              </view>
            </view>
            <view class="signature">{{ inviteInfo.signature || '暂无个性签名' }}</view>
          </view>
          <view class="alert-box">
            <image class="alert" src="/static/images/icon/icon_alert.png"> </image>
            <view class="desc">再次确认绑定邀请人信息，邀请人一旦绑定无法解绑。</view>
          </view>
        </view>
        <view v-else class="phone" :class="{'activity': inviteCode}">
          <view class="numberBox">
            <input v-model="inviteCode" maxlength="11" placeholder-class="input-holder" @input="checkCode" />
          </view>
        </view>
        <view class="butto" :class="{'unselected': !inviteInfo.uid}" @click="bindInvite">确认绑定</view>
      </view>
    </view>
  </base-page-view>
</template>

<script>
import { pageAfterLogin } from '@/utils/navigateTo'
import './index.scss'
export default {
  components: {
  },
  data() {
    return {
      inviteCode: '',
      returnButtonTop: 35,
      inviteInfo: {}
    }
  },
  created() {
  },
  onLoad(option) {
    // #ifdef MP-WEIXIN
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    console.log('menuButtonInfo', menuButtonInfo)
    this.returnButtonTop = menuButtonInfo.top * 2 + 14
    // #endif
  },
  onShow() {
  },
  methods: {
    _back() {
      pageAfterLogin(this)
    },
    checkCode(e) {
      if (e.detail.value.length < 6) {
        return
      }
      this.getInfoByInviteCode(e.detail.value)
    },
    clear() {
      this.inviteInfo = {}
      this.inviteCode = ''
    },
    async getInfoByInviteCode(inviteCode) {
      const res = await this.$api.mineApi.getInfoByInviteCode(inviteCode)
      if (res.code || !res.data || !res.success) {
        uni.showToast({
          title: '邀请码错误, 请重新输入',
          icon: 'none',
          duration: 2 * 1000
        })
        return
      }
      if (res.success) {
        this.inviteInfo = res.data
        this.inviteInfo.mobile = this.inviteInfo.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
        if (!this.inviteInfo.head_img) {
          this.inviteInfo.head_img = '/static/images/mine/touxiang.png'
        }
        this.inviteInfo.nickname = decodeURIComponent(this.inviteInfo.nickname)
        console.log('this.inviteInfo', this.inviteInfo)
        // uni.setStorageSync('__invite_code__', this.inviteCode)
      }
    },
    async bindInvite(data) {
      if (!this.inviteCode) return
      const res = await this.$api.mineApi.bindInviteCode({
        invite_code: this.inviteCode
      })
      if (res.success) {
        pageAfterLogin(this)
      } else {
        return
      }
    }
  }
}
</script>
